<template>
  <div id="footer" :class="chooseIndex == 1?'notShow':''">
    <div id="choose"  v-for="(item, index) in menu" :key="index" @click="router(item, index)">
      <img v-show="chooseIndex !== index" :src="item.icon" alt="" />
      <img v-show="chooseIndex == index" :src="item.selected" alt="" />
      <div>{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      chooseIndex: 0,
      menu: [
        {
          name: "首页",
          path: "/home",
          icon: require("@/assets/footer/icon-home1.png"),
          selected: require("@/assets/footer/icon-home2.png"),
          show: true,
        },
        {
          name: "采购",
          path: "/stock",
          icon: require("@/assets/footer/icon-sort1.png"),
          selected: require("@/assets/footer/icon-sort2.png"),
          show: false,
        },
        {
          name: "下单",
          path: "",
          icon: require("@/assets/footer/icon-cart1.png"),
          selected: require("@/assets/footer/icon-cart2.png"),
          show: false,
        },
        {
          name: "我的",
          path: "",
          icon: require("@/assets/footer/icon-me1.png"),
          selected: require("@/assets/footer/icon-me2.png"),
          show: false,
        },
      ],
    };
  },
  methods: {
    router(data, index) {
      this.chooseIndex = index;
      this.$router.push({
        path: data.path, //跳转的路径
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
#footer {
  width: 100vw;
  padding: 2vw 0;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  #choose {
    width: 20vw;
    height: 100%;
    text-align: center;
    font-size: 2vw;
    img {
      width: 6vw;
      height: 6vw;
    }
  }
}
.notShow{
  display: none !important;
}
</style>
